<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>批次详情</span>
          <el-button @click="goBack">返回</el-button>
        </div>
      </template>

      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="批次号">{{ batchInfo.batchCode }}</el-descriptions-item>
        <el-descriptions-item label="产品名称">{{ batchInfo.productName }}</el-descriptions-item>
        <el-descriptions-item label="计划数量">{{ batchInfo.plannedQuantity }}</el-descriptions-item>
        <el-descriptions-item label="实际数量">{{ batchInfo.actualQuantity || '-' }}</el-descriptions-item>
        <el-descriptions-item label="计划日期">{{ parseTime(batchInfo.plannedDate, '{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="实际日期">{{ batchInfo.actualDate ? parseTime(batchInfo.actualDate, '{y}-{m}-{d}') : '-' }}</el-descriptions-item>
        <el-descriptions-item label="批次状态">
          <el-tag :type="getBatchStatusType(batchInfo.status)">
            {{ getBatchStatusText(batchInfo.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="质量状态">
          <el-tag :type="getQualityStatusType(batchInfo.qualityStatus)">
            {{ getQualityStatusText(batchInfo.qualityStatus) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ batchInfo.remark || '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-divider />

      <el-tabs v-model="activeName">
        <el-tab-pane label="生产计划" name="plan">
          <el-descriptions title="生产计划信息" :column="2" border>
            <el-descriptions-item label="计划开始日期">{{ plan.plannedStartDate ? parseTime(plan.plannedStartDate, '{y}-{m}-{d}') : '-' }}</el-descriptions-item>
            <el-descriptions-item label="计划结束日期">{{ plan.plannedEndDate ? parseTime(plan.plannedEndDate, '{y}-{m}-{d}') : '-' }}</el-descriptions-item>
            <el-descriptions-item label="计划生产线">{{ plan.productionLine || '-' }}</el-descriptions-item>
            <el-descriptions-item label="计划负责人">{{ plan.planManager || '-' }}</el-descriptions-item>
            <el-descriptions-item label="生产优先级">{{ plan.priority || '-' }}</el-descriptions-item>
            <el-descriptions-item label="计划状态">{{ plan.planStatus || '-' }}</el-descriptions-item>
            <el-descriptions-item label="计划描述" :span="2">{{ plan.description || '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="实际生产数据" name="actual">
          <el-descriptions title="实际生产数据" :column="2" border v-if="actual.startDate">
            <el-descriptions-item label="实际开始日期">{{ actual.startDate ? parseTime(actual.startDate, '{y}-{m}-{d}') : '-' }}</el-descriptions-item>
            <el-descriptions-item label="实际结束日期">{{ actual.endDate ? parseTime(actual.endDate, '{y}-{m}-{d}') : '-' }}</el-descriptions-item>
            <el-descriptions-item label="实际生产线">{{ actual.productionLine || '-' }}</el-descriptions-item>
            <el-descriptions-item label="生产负责人">{{ actual.productionManager || '-' }}</el-descriptions-item>
            <el-descriptions-item label="合格数量">{{ actual.passedQuantity || 0 }}</el-descriptions-item>
            <el-descriptions-item label="不合格数量">{{ actual.failedQuantity || 0 }}</el-descriptions-item>
            <el-descriptions-item label="生产耗时(小时)">{{ actual.duration || '-' }}</el-descriptions-item>
            <el-descriptions-item label="生产效率">{{ actual.efficiency ? actual.efficiency + '%' : '-' }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ actual.remark || '-' }}</el-descriptions-item>
          </el-descriptions>
          <el-empty v-else description="暂无实际生产数据"></el-empty>
        </el-tab-pane>

        <el-tab-pane label="关联生产订单" name="orders">
          <el-table v-loading="loading" :data="relatedOrders" border>
            <el-table-column label="订单编号" align="center" prop="orderCode" />
            <el-table-column label="客户名称" align="center" prop="customerName" />
            <el-table-column label="订单日期" align="center" prop="orderDate" width="100">
              <template #default="scope">
                <span>{{ parseTime(scope.row.orderDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" prop="quantity" />
            <el-table-column label="订单状态" align="center" prop="status">
              <template #default="scope">
                <el-tag :type="getOrderStatusType(scope.row.status)">
                  {{ getOrderStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button 
                  link type="primary" 
                  icon="View" 
                  @click="viewOrder(scope.row)"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-empty v-if="!relatedOrders.length" description="暂无关联订单"></el-empty>
        </el-tab-pane>

        <el-tab-pane label="质量状态" name="quality">
          <el-descriptions title="质量检验信息" :column="2" border v-if="qualityInfo.inspectionCode">
            <el-descriptions-item label="检验编号">{{ qualityInfo.inspectionCode }}</el-descriptions-item>
            <el-descriptions-item label="检验日期">{{ qualityInfo.inspectionDate ? parseTime(qualityInfo.inspectionDate, '{y}-{m}-{d}') : '-' }}</el-descriptions-item>
            <el-descriptions-item label="检验人员">{{ qualityInfo.inspector || '-' }}</el-descriptions-item>
            <el-descriptions-item label="检验结果">
              <el-tag :type="qualityInfo.result === 'PASS' ? 'success' : 'danger'">
                {{ qualityInfo.result === 'PASS' ? '合格' : '不合格' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="不合格项" :span="2">{{ qualityInfo.failItems || '-' }}</el-descriptions-item>
            <el-descriptions-item label="处理措施" :span="2">{{ qualityInfo.measures || '-' }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ qualityInfo.remark || '-' }}</el-descriptions-item>
          </el-descriptions>
          <el-empty v-else description="暂无质量检验信息"></el-empty>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { parseTime } from '@/utils/ruoyi'
import { getBatch } from '@/api/qep/production'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const activeName = ref('plan')

// 批次详情数据
const batchInfo = reactive({
  batchCode: '',
  productName: '',
  plannedQuantity: 0,
  actualQuantity: 0,
  plannedDate: '',
  actualDate: '',
  status: '',
  qualityStatus: '',
  remark: ''
})

// 生产计划数据
const plan = reactive({
  plannedStartDate: '',
  plannedEndDate: '',
  productionLine: '',
  planManager: '',
  priority: '',
  planStatus: '',
  description: ''
})

// 实际生产数据
const actual = reactive({
  startDate: '',
  endDate: '',
  productionLine: '',
  productionManager: '',
  passedQuantity: 0,
  failedQuantity: 0,
  duration: 0,
  efficiency: 0,
  remark: ''
})

// 关联订单列表
const relatedOrders = ref([])

// 质量状态信息
const qualityInfo = reactive({
  inspectionCode: '',
  inspectionDate: '',
  inspector: '',
  result: '',
  failItems: '',
  measures: '',
  remark: ''
})

// 获取批次状态类型
const getBatchStatusType = (status) => {
  if (status === 'PLANNED') return 'info'
  if (status === 'IN_PROGRESS') return 'warning'
  if (status === 'COMPLETED') return 'success'
  if (status === 'CANCELLED') return 'danger'
  return 'info'
}

// 获取批次状态文本
const getBatchStatusText = (status) => {
  const statusMap = {
    'PLANNED': '计划中',
    'IN_PROGRESS': '生产中',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消'
  }
  return statusMap[status] || status
}

// 获取质量状态类型
const getQualityStatusType = (status) => {
  if (status === 'PENDING') return 'info'
  if (status === 'INSPECTING') return 'warning'
  if (status === 'PASSED') return 'success'
  if (status === 'FAILED') return 'danger'
  if (status === 'REWORK') return 'warning'
  return 'info'
}

// 获取质量状态文本
const getQualityStatusText = (status) => {
  const statusMap = {
    'PENDING': '待检测',
    'INSPECTING': '检测中',
    'PASSED': '合格',
    'FAILED': '不合格',
    'REWORK': '返工'
  }
  return statusMap[status] || status
}

// 获取订单状态类型
const getOrderStatusType = (status) => {
  if (status === 'CREATED') return 'info'
  if (status === 'PROCESSING') return 'warning'
  if (status === 'COMPLETED') return 'success'
  if (status === 'CANCELLED') return 'danger'
  return 'info'
}

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const statusMap = {
    'CREATED': '已创建',
    'PROCESSING': '处理中',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消'
  }
  return statusMap[status] || status
}

// 获取批次详情
const getBatchInfo = (id) => {
  loading.value = true
  getBatch(id).then(response => {
    const data = response.data
    
    // 基本信息
    Object.assign(batchInfo, data)
    
    // 生产计划信息
    if (data.plan) {
      Object.assign(plan, data.plan)
    }
    
    // 实际生产数据
    if (data.actual) {
      Object.assign(actual, data.actual)
    }
    
    // 关联订单
    if (data.orders && data.orders.length) {
      relatedOrders.value = data.orders
    }
    
    // 质量状态
    if (data.quality) {
      Object.assign(qualityInfo, data.quality)
    }
    
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

// 查看订单详情
const viewOrder = (row) => {
  // 跳转到订单详情页面
  // router.push({ path: '/order/detail', query: { id: row.id } })
}

// 返回列表页
const goBack = () => {
  router.go(-1)
}

onMounted(() => {
  const id = route.query.id
  if (id) {
    getBatchInfo(id)
  }
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-divider {
  margin: 20px 0;
}

.el-descriptions {
  margin-bottom: 20px;
}
</style> 